<template>
  <!-- 确认退税 -->
  <el-dialog
    v-model="dialogVisible"
    title="确认退税"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="left"
      label-width="auto"
      status-icon
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="退税金额：" prop="amount">
            <span>{{ filters.thousands(ruleForm.amount) }}元</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出口申请单号：" prop="bankName">
            <span>{{ ruleForm.carOutApplyId }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.billUrl">
          <el-form-item label="退税单：">
            <el-button
              link
              size="small"
              class="mr-sm"
              type="primary"
              @click="onFileOpen(ruleForm.billUrl)"
            >
              <span>查看</span>
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="结算银行：" prop="sellerBankId">
            <el-select
              v-model="ruleForm.sellerBankId"
              size="large"
              class="wh"
              placeholder="请选择结算银行"
            >
              <el-option
                v-for="item in bankList"
                :key="item.id"
                :label="item.bankName"
                :value="item.id"
              />
            </el-select>
            <el-button
              class="mt-sm"
              type="primary"
              link
              size="small"
              @click="handleBankAdd"
              >新建银行信息</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="large" :loading="loading" @click="handleClose"
        >取 消</el-button
      >
      <el-button
        size="large"
        :loading="loading"
        type="primary"
        @click="handleSubmit"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { onFileOpen } from "@/utils/index";
const emits = defineEmits(["change"]);
const { proxy } = getCurrentInstance();
const router = useRouter();
const dialogVisible = ref(false);
const loading = ref(false);
const ruleForm = ref({});
const ruleFormRef = ref();
const bankList = ref([]);
const handleSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      const url = "/sellerTaxRefundList/selectSettlementBank";
      try {
        await proxy.$post({
          url,
          data: ruleForm.value,
        });
        ElMessage.success("操作成功");
        loading.value = false;
        emits("change");
        handleClose();
      } catch (error) {
        loading.value = false;
      }
    }
  });
};
const handleBankAdd = () => {
  handleClose();
  router.push({
    path: "/IndividualCenter",
    query: {
      key: 5,
    },
  });
};

const handleOpen = (item) => {
  dialogVisible.value = true;
  ruleForm.value = {
    id: item.id,
    carOutApplyId: item.carOutApplyId,
    amount: item.amount,
    billUrl: item.billUrl,
  };
  const url = "/sellerBankList/list";
  proxy.$get({ url }).then((res) => {
    bankList.value = res;
  });
};
const handleClose = () => {
  ruleFormRef.value.resetFields();
  ruleForm.value = {};
  dialogVisible.value = false;
};
const rules = ref({
  sellerBankId: [
    {
      required: true,
      message: "请选择结算银行",
      trigger: "change",
    },
  ],
});
defineExpose({
  handleOpen,
});
</script>

